<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录页面</title>
    <link rel="stylesheet" href="style.css">
    <link rel="icon" type="image/png" href="images/bee.png">
</head>
<body style="background: url(images/bg1.png) no-repeat;background-size: cover; background-attachment:fixed;">
    <div class="header" style="display: flex;flex-direction: row; background-color: #F6B541;">
        <!-- <div>
            <ul class="nav">
                <li><img src="images/nan.png" alt="管理员联系方式" style="width: 100px; height: 30px;"></li>
                <li><img src="images/快乐的蜜蜂.png" alt="管理员联系方式" style="width: 50px; height: 30px;"></li>
                <li style="color: #d3b7d8;">小蜜蜂图片收集网</li>
            </ul>
        </div> -->
        <ul>
            <a href="ufpage.html">
             <img src="images/shouye.png" alt="管理员联系方式" style="width: 150px; height: 22px;margin-top: -10px; margin-left: -10%;">
            </a>
        </ul>
            
        <ul>
            <li style="display: flex;flex-direction: row;">
              <button type="button" style="background-color: #E87B17;width: 80px; color: #fff;margin-left: 75vw; margin-top: -2vh; border-radius: 20px; height: 30px; border-color: #DD514C;">登录</button>&nbsp;&nbsp;
              <button type="button" style="background-color: #fff;width: 80px; color: #000; margin-top: -2vh;  border-radius: 20px; border-color: #DD514C;" onclick="register()">注册</button>
            </li>
        </ul>
    </div>
    <div class="container">
        <div class="form-box">
            <!-- 验证码登录 -->
            <div class="yanzhengma-box hidden">
                <h1>验证码登录</h1>
                <input type="text" placeholder="手机号码" id="phone" onblur="checkphone()"style="margin-top: 5vh;" >
                <div style="margin-left: -165px;"><span id="phonemsg" style="font-size: 12px;" >&nbsp;</span></div>
                <ul>
                    <li style="list-style: none;">
                        <input type="text" placeholder="验证码" style="width: 150px;height: 15px;" id="ver" onblur="checkver()">
                        <button style="width: 100px; height: 30px; padding-top: 1px; letter-spacing:0.01em;" onclick="getLoginCode()">获取验证码</button>
                        <br><span id="vermsg" style="font-size: 12px;" >&nbsp;</span>
                    </li>
                </ul>
                <button onclick="loginByCode()">立即登录</button>
                
                <!-- <input type="checkbox" checked="checked" id="jizhumima"><label for="jizhumima">记住密码</label> -->
                <br>
                <div>
                    <ul>
                        <!-- <li style="display: flex;flex-direction: row;">
                            <input type="checkbox" id="neirong" checked="checked" style="margin-top: 3px;padding-left: 0; margin-left: 0; border: solid; width: 20px;"> 
                            <label for="neirong" style="margin-top: 0;width: 100px; padding-left: 0;">记住密码</label>
                            <a href="javascript:;" style="width: 100px; text-decoration: none;">忘记密码?</a>
                        </li> -->
                        <!-- <input type="checkbox" name="tiaokuan" id="neirong" checked="checked"> <label for="neirong">我同意注册条框和会员加入标准</label>
                        <label><input type="checkbox" checked="checked">记住密码</label> -->  
                        <br>
                        <li style="list-style-type: none;"><a href="javascript:;" style="text-decoration: none;" onclick="register()">没有账号,去注册</a></li>  
                    </ul>
                </div>   
            </div>
            <!-- 账号登录 -->
            <div class="zhanghao-box">
                <h1  >账号登录</h1>
                <input type="text" placeholder="账号" id="username" onblur="checkusername()"style="margin-top: 5vh;">
                <br><span id="usernamemsg" style="font-size: 12px;" >&nbsp;</span>
                <input type="password" placeholder="密码" id="password" onblur="checkpsw()" >
                <br><span id="passwordmsg" style="font-size: 12px;" >&nbsp;</span>
                <button onclick="loginBtnClicked()" style="margin-top: 0;">立即登录</button>
                <br><span style="font-size: 12px;" >&nbsp;</span><br>
                <!-- <input type="checkbox" checked="checked" id="jizhumima"><label for="jizhumima">记住密码</label> -->
                <br>
               <span></span>
                <div style="margin-top: -50px;">
                    <ul>
                        <li style="display: flex;flex-direction: row;">
                            <input type="checkbox" id="neirong1" checked="checked" style="margin-top: 1px;padding-left: 0; margin-left: 0; border: solid; width: 20px;"> 
                            <label for="neirong1" style="margin-top: 0;width: 100px; padding-left: 0;">记住密码</label>
                            <a href="javascript:;" style="width: 100px; text-decoration: none;" onclick="lostpsw()">忘记密码?</a>
                        </li>
                        <!-- <input type="checkbox" name="tiaokuan" id="neirong" checked="checked"> <label for="neirong">我同意注册条框和会员加入标准</label>
                        <label><input type="checkbox" checked="checked">记住密码</label> -->  
                        <br>
                        <li style="list-style-type: none;"><a href="javascript:;" style="text-decoration: none;" onclick="register()">没有账号,去注册</a></li>  
                    </ul>
                </div>   
            </div>
        </div>
        <!-- 左边去用账号登录 -->
        <div class="con-box left">
            <h2>欢迎来到<br><span>小蜜蜂图片收集网</span></h2>
            <p>请在右侧通过验证码登录吧</p>
            <p>想通过账号登录?</p>
            <button id="zhanghaodenglu">账号登录</button>
        </div>
        <!-- 右边去用验证码登录 -->
        <div class="con-box right">
            <h2>欢迎来到<br><span>小蜜蜂图片收集网</span></h2>
            <p>请在左侧通过账号登录吧</p>
            <p>想通过验证码登录?</p>
            <button id="yanzhengmadenglu">验证码登录</button>
        </div>
    </div>
    <script>
        function checkusername(){
            var username= document.getElementById('username');
            var usernamemsg= document.getElementById('usernamemsg');
            var reg1 =/^1[34578]\d{9}$/;
            if(username.value.length==0){
                usernamemsg.innerHTML = "账号不得为空";
                usernamemsg.style.color='red';
            return false;
            }else if(!reg1.test(username.value)){
                usernamemsg.innerHTML = "请输入11位已注册手机号";
                usernamemsg.style.color='red';
            return false;
             } else {
                usernamemsg.innerHTML = "账号格式符合要求";
                usernamemsg.style.color='green';
             return true;
            }
          }
        
        function checkpsw(){
            var password= document.getElementById('password');
            var passwordmsg= document.getElementById('passwordmsg');
            var reg2 =/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,20}$/;   //6-20位，包含大小写和数字
            if(password.value.length==0){
                passwordmsg.innerHTML = "密码不得为空";
               passwordmsg.style.color='red';
            return false;
            }else if(!reg2.test(password.value)){
                passwordmsg.innerHTML = "请输入6-20位数字和字母组合的密码";
               passwordmsg.style.color='red';
            return false;
             } else {
                passwordmsg.innerHTML = "密码格式符合要求";
                passwordmsg.style.color='green';
             return true;
            }
          }
        
        function checkphone(){
            var phone= document.getElementById('phone');
            var phonemsg= document.getElementById('phonemsg');
            var reg1 =/^1[34578]\d{9}$/;
            if(phone.value.length==0){
                phonemsg.innerHTML = "手机号不得为空";
                phonemsg.style.color='red';
            return false;
            }else if(!reg1.test(phone.value)){
                phonemsg.innerHTML = "请输入11位已注册手机号";
                phonemsg.style.color='red';
            return false;
             } else {
                phonemsg.innerHTML = "账号格式符合要求";
                phonemsg.style.color='green';
             return true;
            }
          }
        
        function checkver(){
            var ver= document.getElementById('ver');
            var vermsg= document.getElementById('vermsg');
            if(ver.value.length==0){
                  vermsg.innerHTML = "验证码不得为空";
                 vermsg.style.color='red';
                 return false;
              }
           else if(ver.value.length!=6){
                vermsg.innerHTML = "验证码必须为6位";
               vermsg.style.color='red';
            return false;
            }else {
                vermsg.innerHTML = "验证码格式符合要求";
                vermsg.style.color='green';
             return true;
             }
          }

          function confirmDialog1(){  
            alert('手机号错误或密码错误！请重新输入')
            }  
        function confirmDialog2(){  
            alert('验证码错误！请重新输入')
            }  
            </script>
            
    <script>
            //要操作到的元素
            let zhanghaodenglu=document.getElementById('zhanghaodenglu');
            let yanzhengmadenglu=document.getElementById('yanzhengmadenglu');
            let form_box=document.getElementsByClassName('form-box')[0];
            let yanzhengma_box=document.getElementsByClassName('yanzhengma-box')[0];
            let zhanghao_box=document.getElementsByClassName('zhanghao-box')[0];
            //去通过验证码登录按钮点击事件
            yanzhengmadenglu.addEventListener('click',()=>{
                form_box.style.transform='translateX(80%)';
                zhanghao_box.classList.add('hidden');
                yanzhengma_box.classList.remove('hidden');
            })
            //去通过账号登录按钮点击事件
            zhanghaodenglu.addEventListener('click',()=>{
                form_box.style.transform='translateX(0%)';
                yanzhengma_box.classList.add('hidden');
                zhanghao_box.classList.remove('hidden');
            })
    </script>
    <script>
        var code = '111111'
        function loginBtnClicked()
        {
            const username = document.getElementById("username").value
            const password = document.getElementById("password").value
            console.log(username)
            console.log(password)
            
            sessionStorage.setItem("username", username);  //后面页面可以借此直接获取username
            const http = new XMLHttpRequest()
            http.open('POST','http://localhost/login')
            http.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            http.send('username=' + username + '&password=' + password)

            http.onreadystatechange = function()
            {
                if(http.readyState == 4 && http.status == 200)
                {
                    console.log("进来了")
                    console.log(http.responseText)
                    if(http.responseText.indexOf(true)+1)
                    {
						window.location.href='./yfpage.html'                 
                    }else{
                        confirmDialog1()//否则就是密码错误，弹出提示框
                    }
                }
            }
        }
        function getLoginCode()
        {
            const username = document.getElementById("phone").value;
            const xhr=new XMLHttpRequest();
            xhr.open('POST','http://106.ihuyi.com/webservice/sms.php?method=Submit');
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            code =  getCode(6)
            console.log('1111')
            console.log(code)
            xhr.send('account=C66317888&password=8831f7305a7fa9f38d194395d751457f&mobile=' 
                + username + '&content=您的验证码是：' + code + '。请不要把验证码泄露给其他人。');
            xhr.onreadystatechange=function(){
                // 判断
                if(xhr.readyState===4){
                    if(xhr.status>= 200 && xhr.status<=300){
                        // 处理服务端返回的结果
                        console.log(xhr.response);
                        console.log('返回验证码结果')
                    }
                }
            }
        }
    function loginByCode()
    {
        const username = document.getElementById("phone").value
        const verify = document.getElementById("ver").value;
        const http = new XMLHttpRequest()
        http.open('POST','http://localhost/loginByCode')
        http.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        console.log(code)
        console.log(verify)
        http.send('username=' + username + '&verify=' + verify + '&code=' + code)

        http.onreadystatechange = function()
            {
                if(http.readyState == 4 && http.status == 200)
                {
                    console.log(http.responseText)
                    if(http.responseText.indexOf(true)+1)
                    {
                        window.location.href='./yfpage.html'
                    }
                    else{
                        confirmDialog2()
                    }
                }
            }
    }
    function getCode(num){
      var arrays=[
        '1', '2', '3', '4', '5', '6', '7', '8', '9', '0'
      ];
      //在大小写字母和数字中任意选出随机组合当作验证码
      var code = "";
      for (var i = 0; i < num; i++) {
        //随机获取一个数组的下标
        var r = parseInt(Math.random() * arrays.length);
        code += arrays[r];
      }
      return code
    }
    

  function register()
  {
    window.location.href='./register.html'
  }
  function lostpsw()
  {
    window.location.href='./lostpsw.html'
  }
  function buttonClick(){
            window.confirm("你点击了按钮哦");
        }
</script>
</body>
</html>